<!-- 关联单号组件 -->
<template>
	<div>
		<u-popup safe-area-inset-bottom v-model="show" mode="left">
			<!--  <van-nav-bar
        class="nav"
        title="我的客户"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      /> -->

			<!-- 搜索区域 -->
			<div style="position: fixed;width: 99%;background-color: #fff;z-index: 999;">
				<div style="margin-top: 10px;">
					<uni-search-bar style="color:#fff" :textColor="'#ccc'" @confirm="search" v-model="queryParam[0].Keyword"
						@clear="cancel" placeholder="请输入客户名称" @cancel="cancel"></uni-search-bar>
				</div>
			</div>


			<div class="outerBox" style="width:300px;">
				<scroll-view style="width: 100%;height: 100%;padding-top: 60px;" scroll-y="true" @scrolltolower="lower">
					<div @click="sampleChoice(item)" v-for="(item, index) in data" :key="index">
						<uni-card :title="item.CustomerName" title-size="50">
							<text class="uni-body">单号: {{ item.DocumentNo}}</text>
						</uni-card>
					</div>

					<div style="padding-bottom: 20px;">
						<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
					</div>

					<div v-if="isSearchUser" class="search-none">
						<img src="../assets/search.png" alt="">
						<h4 style="color:#6C6C6C;margin-top:5px">客户检索</h4>
					</div>
				</scroll-view>
			</div>
		</u-popup>
	</div>
</template>

<script>
	import {
		// 获取样品反馈列表
		GetDataListByMySelfAndMoreCondition

	} from '@/api/interface.js'
	export default {
		props: {
			isAllData: {
				default: false,
				type: Boolean
			} // 是否查询全部数据
		},
		components: {},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				immediateCheck: false,
				loading: false,
				finished: false,
				selectedRowKeys: [],
				queryParam: [{
					Condition: "CustomerName",
					Keyword: ""
				}],
				pagination: {
					current: 1,
					pageSize: 10,
					Total: 0,
				},
				entity: {},
				judgment: true,
				data: [],
				show: false,
				Id: "",
				PageRows: 20,
				isSearchUser: false
			};
		},
		onLoad() {
			// 组件创建的时候初始默认检索提示
			this.isSearchUser = true
		},
		methods: {
			// 触底
			lower(e) {
				if (this.data.length >= this.pagination.Total) return
				// 上拉加载
				this.pagination.current++;
				this.getDataList()
			},
			onLoading() {
				this.loading = true; //防止第一页重复加载
				// 获取客户列表
				this.getDataList();
			},
			paginationchange(a) {
				// a:当前选中页码
				this.pagination.current = a;
				this.getDataList();
			},
			//返回
			onClickLeft() {
				this.show = false;
				// 返回时候显示检索提示
				this.isSearchUser = true
				//列表 数据重置
				this.queryParam.cCusName = ""
				this.data = []
			},
			close() {
				this.show = false;
			},
			// 取消
			cancel() {
				this.queryParam.cCusName = ""
				this.data = [];
				this.status = "noMore"
				this.isSearchUser = true
			},
			onSearch() {
				if (this.queryParam.cCusName) {
					this.search(this.queryParam.cCusName)
				} else {
					this.search
				}

			},
			//搜索
			search(value) {
				this.isSearchUser = false
				this.pagination.current = 1
				this.data = []
				this.status = "loading"
				this.getDataList();
			},
			sampleChoice(item) {
				console.log(item);
				this.$emit("sampleClickChange", item);
				this.show = false;
			},
			// 获取关联单号列表
			getDataList() {
				this.status = "loading"
				GetDataListByMySelfAndMoreCondition({
						PageIndex: this.pagination.current,
						PageRows: this.pagination.pageSize,
						SortField: "Id",
						SortType: "desc",
						Search: this.queryParam,
					})
					.then(resJson => {
						if (resJson.Success) {
							console.log('获取关联单号列表', resJson.Data)
							// 赋值总条数
							this.pagination.Total = resJson.Total;
							if (resJson.Data.length == 0 || resJson.Data == null) {
								this.status = "noMore"
								return
							}
							if (this.pagination.current == 1) {
								this.data = resJson.Data
							} else {
								// 有数据 赋值列表 加载状态结束
								this.data = this.data.concat(resJson.Data)
							}
							// 如果list长度大于等于总数据条数，数据全部加载完成
							if (this.data.length >= resJson.Total) {
								this.status = "noMore"
								return
							}

						} else {
							this.$errorToast(resJson.Msg);
							this.status = "noMore"
						}
					});
			},
			init() {
				this.show = true;
				// 获取关联单号列表
				this.getDataList()
			},
			openForm(CustomerId) {
				this.status = "loading"
				console.log('传递过来的客户id', CustomerId, this.queryParam)
				this.queryParam[0].Keyword = CustomerId
				this.init();
			}
		}
	};
</script>

<style scoped>
	/* 覆盖uniapp卡片的标题样式 */
	.uni-card>>>.uni-card__header-content-title>span {
		font-size: 26rpx;
	}

	.search-none {
		height: 70%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.outerBox {
		/* 	height: calc(100vh - 120px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto; */
		/* #ifdef H5 */
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 220px);
		/* #endif */
	}

	.ckbxcli {
		border: 1px solid Gainsboro;
		width: 95%;
		text-align: center;
		margin-left: 2%;
		margin-top: 10px;
		box-sizing: border-box;
		padding: 20rpx;
		/* 	padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 2px; */
		cursor: pointer;
		/* padding-top: 6px; */
		list-style-type: none;
		display: inline-block;
	}

	.ul {
		/* margin-top: 20px; */
	}

	.nav {
		position: fixed !important;
		width: 100%;
	}
</style>